import { useState, useEffect, useRef } from "react";
import { Table, Button, Modal, Popconfirm, Form, Input } from 'antd'
import { getShop, getDelete, getAdd, getUpdate, getXiang, getLook } from '../api/index.js'
import { Select, Space } from 'antd';

function Home() {
    const [titles, setTitle] = useState('新增')
    const [shop, setShop] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    const newId = useRef('')
    const [form] = Form.useForm();
    const { Search } = Input;
    const datas = () => {
        getShop().then(res => {
            console.log('列表数据：', res)
            setShop(res)
        })
    }
    useEffect(() => {
        datas()
    }, [])
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '电话',
            dataIndex: 'sech',
            key: 'sech',
        },
        {
            title: '房间号',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '价格',
            dataIndex: 'push',
            key: 'push',
        },
        {
            title: '结账状态',
            dataIndex: 'jie',
            key: 'jie',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <div>
                    <Button onClick={() => getUpd(record.id)}>编辑</Button>
                    <Popconfirm
                        title="删除"
                        description="确定要删除这条数据吗？"
                        onConfirm={() => del(record.id)}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                </div>
            ),
        }
    ];
    const handleChange = async(value) => {
        console.log(`selected ${value}`);
        if (value == "") {
            datas();
        } else {
            let res = await getLook({ jie_like: value });
            setShop(res.data)
        }
      };
    const del = async (id) => {
        await getDelete(id)
        datas()
    }
    const add = async () => {
        setTitle('新增')
        setIsModalOpen(true)
        newId.current = ''
    }
    const getUpd = async (id) => {
        setTitle('编辑')
        setIsModalOpen(true)
        const res = await getXiang(id)
        newId.current = id

        form.setFieldsValue(res.data)
    }
    const onFinish = async (values) => {
        if (newId.current == '') {
            await getAdd(values)
        } else {
            await getUpdate(newId.current, values)
        }
        datas()
        form.resetFields()
        setIsModalOpen(false)
    }
    const cancel = () => {
        setIsModalOpen(false)
        form.resetFields()
    }
    const onSearch = async (value, e, info) => {
        if (value == "") {
            datas();
        } else {
            let res = await getLook({ name_like: value });
            setShop(res.data)
        }
    }
    return (
        <div>

            <Search
                placeholder="顾客姓名"
                onSearch={onSearch}
                style={{
                    width: 180,
                }}
            />
            <Button onClick={() => add()}>添加</Button>
            <Select
      defaultValue="请选择结账状态"
      style={{
        width: 150,
      }}
      onChange={handleChange}
      options={[
        {
          value: '已结账',
          label: '已结账',
        },
        {
          value: '未结账',
          label: '未结账',
        },
      ]}
    />
            <Table dataSource={shop} columns={columns} rowKey="id" />
            <Modal title={titles} open={isModalOpen} footer={null}>
                <Form onFinish={onFinish} form={form} name="shopForm"
                >
                    <Form.Item label="姓名" name='name'>
                        <Input placeholder="姓名" />
                    </Form.Item>
                    <Form.Item label="手机号" name='sech'>
                        <Input placeholder="手机号" />
                    </Form.Item>
                    <Form.Item label="房间号" name='num'>
                        <Input placeholder="房间号" />
                    </Form.Item>
                    <Form.Item label="价格" name='push'>
                        <Input placeholder="价格" />
                    </Form.Item>
                    <Form.Item label="结账状态" name='jie'>
                        <Input placeholder="结账状态" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" onClick={() => alters()}>
                            保存
                        </Button>
                        <Button onClick={() => cancel()}>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}
export default Home